import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';
import { Button, message } from 'antd';
import Cookies from 'js-cookie';
import { useEffect, useState } from 'react';
import { history } from 'umi';

import { registerSuccessCb } from '@/services/login';
import { getQueryVariable } from '@/util/utils';

import styles from './index.less';

export default function ConfirmEmail() {
  const [is, setIs] = useState<string>('');
  const userId = getQueryVariable('userId');
  const code = getQueryVariable('code');
  const registerSuccessCallback = async () => {
    const res = await registerSuccessCb({ userId, code });
    if (res) {
      setIs('邮箱验证成功！');
      message.info('即将跳转到主页');
      setTimeout(() => {
        history.push('/');
      }, 1000);
    } else {
      setIs('邮箱验证失败');
      localStorage.clear();
      Cookies.remove('saas_token');
      message.info('请检查邮箱, 重新登录');
      history.push('Login');
    }
  };

  useEffect(() => {
    if (!!userId&&!!code){
      registerSuccessCallback().then();
    } else {
      setIs('邮箱验证失败');
      message.error('未传入参数');
    }
  }, []);
  return (
    <>
      <div className={styles.confirmContent}>
        <div className={styles.content}>
          {
            is==='邮箱验证失败' ? <CloseCircleFilled style={{ color: 'red',  fontSize: 60 }} /> :  <CheckCircleFilled style={{ color: '#1A3DC9',  fontSize: 60 }} />
          }
          <Button type={'primary'} >{is}</Button>
        </div>
      </div>
    </>
  );
}
